<template>
    <div class="pageTwo">
        <div class="left">

            <!-- 筛选器 -->
            <el-input
            placeholder="输入关键字对总部进行过滤"
            v-model="filterText">
          </el-input>
          

          <!-- 树状结构 -->
        <el-tree
            class="filter-tree"
            :data="treesData"
            :props="defaultProps"
            render-after-expand
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            accordion
            @node-click="getCurrentKey"
          >
        </el-tree>

        </div>
    </div>

</template>


<script>
    import { getlist } from '@/http/api.js'
    import { mapState } from 'vuex'

    export default {
        name:'sumleft',
        // 监测数据方便筛选
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
        }},

        // 数据
        data() {
            return{
                filterText: '',
                secShow: false,

                // 树状结构的数据
                // treeData:[],
                treesData: [
                    {
                        id: 3,
                        name: '上海总部',
                        code: 'dasd',
                        area: '上海',
                        man: '龙龙',
                        phone: '12346558',
                        fax: '027-12546582',
                        province: '上海',
                        city: '上海',
                        country: '福熙大道',
                        address: '上海浦东',
                        status: true,
                        kumis: null,
                        subbranches: [
                            {
                                id: 4,
                                pid: 3,
                                name: '浦东分店',
                                code: 'dsadf',
                                area: '上海区域',
                                man: 'woo',
                                phone: '125487795',
                                fax: '027-456811245',
                                province: 'city',
                                city: '上海',
                                country: '福熙大道',
                                address: '上海浦东',
                                status: true,
                                kumis: null,
                                subbranches: [
                                    {
                                        id: 6,
                                        pid: 4,
                                        name: '上海柜台',
                                        type: '素金',
                                        status: true,
                                    }
                                ]
                            },

                        ]
                    },

                    //er
                    {
                        id: 88,
                        name: '北京总部',
                        code: 'dasd',
                        area: '上海',
                        man: '龙龙',
                        phone: '12346558',
                        fax: '027-12546582',
                        province: '上海',
                        city: '上海',
                        country: '福熙大道',
                        address: '上海浦东',
                        status: true,
                        kumis: null,
                        subbranches: [
                            {
                                id: 954,
                                pid:88,
                                name: '北京分店',
                                code: 'dsadf',
                                area: '上海区域',
                                man: 'woo',
                                phone: '125487795',
                                fax: '027-456811245',
                                province: 'city',
                                city: '上海',
                                country: '福熙大道',
                                address: '上海浦东',
                                status: true,
                                kumis: null,
                                subbranches: [
                                    {
                                        id: 462,
                                        pid:954,
                                        name: '北京柜台',
                                        type: '素金',
                                        status: true,
                                    }
                                ]
                            },

                        ]
                    },
                ],
                // getList:[],
                defaultProps: {
                    children: 'subbranches',
                    label: 'name',
                    id:'id'
                }
                }
        },
        created(){
            this.getTreeList();
            this.$store.dispatch('getShopList');

        },
        computed: {
            ...mapState(['shopList'])
        },
        methods: {
            // 树状结构点击收缩展开方法
            handleNodeClick(data) {
                console.log('展开',data);
            },

            //返回点击的门店对象的id
            getCurrentKey(e) {
                console.log(this.$refs.tree.getCurrentKey(e));
                console.log('id为：'+ e.id);
                this.$shopMessage.$emit('showSumData',e)
            },
            // 筛选方法
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },

            // 获取树状结构列表信息
            getTreeList(){
                getlist().then(res=>{
                    this.treeData = res.data.data;
                }).catch(err=>{
                    console.log(err)
                })
            },
        },
    }

  </script>

<style>
    .pageTwo{
        width: 100%;
        overflow: hidden;
    }
    .left{
        float: left;
        width: 300px;
        height: 100%;
    }
    .el-tree{
        margin: 20px 5px 20px;
    }
    .left ul li{
        cursor: pointer;
        list-style: none;
    }
    .left ul li:hover{
        color: #fff;
    }
    .el-input{
        margin: 20px 0;
    }
</style>